import React, { useState } from 'react'
import style from './index.module.scss';
import Avatar from '@mui/material/Avatar';
import Nav from '../../components/Nav';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Chip from '@mui/material/Chip';
import ListItem from '../../components/ListItem';
import List from '@mui/material/List';
import UserModal from '../../components/UserModal';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';



export default function Home() {
  const [value, setValue] = useState('推荐');
  const [modalFlag, setModalFlag ] = useState(false);
  const dispatch = useDispatch();
  const workClassify = useSelector(state => state.workClassify);
  const navigate = useNavigate();
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleModal = (flag) => {
    setModalFlag(flag);
  }

  const changeClassify = (name) => {
    dispatch({
      type: 'changeWorkClassify',
      workClassify: name
    })
  }

  const userClick = (item) => {
    const { _id } = item;
    navigate(`/work/workDetail`,{
      state: { 
        id: _id,
        isHide: false,
        isShowContact: false
      }
    });
  }
 

  const data = [
    {
      _id: 101,
      title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
      detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
      tag: [
        {
          name: '有提成'
        },
        {
          name: '有提成'
        },
        {
          name: '有提成'
        }
      ],
      price: 1000,
      methods: '月',
      publicNickName: '湖南信息学院',
      publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
    },
    {
      _id: 101,
      title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
      detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
      tag: [
        {
          name: '有提成'
        },
        {
          name: '有提成'
        },
        {
          name: '有提成'
        }
      ],
      price: 1000,
      methods: '月',
      publicNickName: '湖南信息学院',
      publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
    },
    {
      _id: 101,
      title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
      detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
      tag: [
        {
          name: '有提成'
        },
        {
          name: '有提成'
        },
        {
          name: '有提成'
        }
      ],
      price: 1000,
      methods: '月',
      publicNickName: '湖南信息学院',
      publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
    },
    {
      _id: 101,
      title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
      detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
      tag: [
        {
          name: '有提成'
        },
        {
          name: '有提成'
        },
        {
          name: '有提成'
        }
      ],
      price: 1000,
      methods: '月',
      publicNickName: '湖南信息学院',
      publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
    },
    {
      _id: 101,
      title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
      detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
      tag: [
        {
          name: '有提成'
        },
        {
          name: '有提成'
        },
        {
          name: '有提成'
        }
      ],
      price: 1000,
      methods: '月',
      publicNickName: '湖南信息学院',
      publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
    },
    {
      _id: 101,
      title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
      detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
      tag: [
        {
          name: '有提成'
        },
        {
          name: '有提成'
        },
        {
          name: '有提成'
        }
      ],
      price: 1000,
      methods: '月',
      publicNickName: '湖南信息学院',
      publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
    }
  ]

  const data2 = [
    {
      name: '全部分类',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务1',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务2',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务3',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务4',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务5',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务6',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务7',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务8',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务9',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务10',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务11',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务12',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务13',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务14',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    },
    {
      name: '餐饮服务15',
      _id: 1,
      data: [
        {
          name: '全部',
          _id: 0
        },
        {
          name: '服务生',
          _id: 0
        },
        {
          name: '咖啡生',
          _id: 0
        },
        {
          name: '收银员',
          _id: 0
        },
        {
          name: '茶店',
          _id: 0
        },
        {
          name: '外卖配送',
          _id: 0
        },
        {
          name: '见习经理',
          _id: 0
        }
      ]
    }
    
  ]

  return (
    <>
    <UserModal changeClassify={changeClassify} modalFlag={modalFlag} handleModal={handleModal} data={data2}></UserModal>
    <div className={style.content}>
      <div className={style.head}>
        <div className={style.top}>
            <div className={style.left_icon}>
              <Avatar  sizes="14" alt="湘小信" src="https://sls-cloudfunction-ap-guangzhou-code-1309209904.cos.ap-guangzhou.myqcloud.com/logo.png" />
            </div>
            <div className={style.right_h}>
                <div className={style.right_h_top}>
                  湘小保障&nbsp;&nbsp;|&nbsp;&nbsp;兼职无忧
                </div>
                <div className={style.right_h_bottom}>
                  岗位审核&nbsp;100%客服响应
                </div>
            </div>
        </div>
        <div className={style.center}>
          <Nav></Nav>
        </div>
        <div className={style.bottom}>
          {/* 等待开发 */}
        </div>
      </div>
      <div className={style.title}>
        小信精选
      </div>
      <div className={style.list}>
        <div className={style.list_head}>
          <Tabs
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons={true}
        >
          <Tab label="推荐" value="推荐" />
          <Tab label="在家做" value="在家做" />
          <Tab label="主播" value="主播" />
          <Tab label="在线课程" value="在线课程" />
          <Tab label="在本地" value="在本地" />
          <Tab label="服务员" value="服务员" />
          <Tab label="实习" value="实习" />
        </Tabs>
        <div className={style.classify}>
            <Chip
            label="默认"
            variant="outlined"
            color="primary"
            size="small"
          />
          <Chip
            size="small"
            className={workClassify === '全部' ? '' : style.item_native}
            label={workClassify}
            onClick={() => {handleModal(true)}}
            variant="outlined"
          />
        </div>
        </div>
        <div className={style.list_content}>
        <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
          {data.map((item) => {
            return (
              <ListItem key={item._id + ''} userClick={userClick} {...item}></ListItem>
            )
          })}
        </List>
        </div>
      </div>
    </div>
    </>
    
  )
}
